<template>
	<view class="list-view">
		<view class="top-bar"><uni-navbar :fixed="true" :back="false" color="#fff" title="代表说"></uni-navbar></view>

		<u-tabs class="btm-tabs" :list="tabsList" :line="true" :current="tabsCurrent" @change="tabsChange" :is-scroll="false"></u-tabs>

		<block v-if="tabsCurrent == 0">
			<view class="list-box" :style="{ background: loading == 'nodata' ? 'none' : '' }">
				<view class="list-info_06" v-for="(item, index) of momentsList" :key="item.id">
					<view class="info-avatar"><image v-if="item.userInfo" class="sub-img" @click="navTo(item)" :src="$imagePreview(item.userInfo.remark1)" mode="aspectFill"></image></view>
					<view class="info-inner">
						<view class="user">{{ item.createBy }}</view>
						<view class="content">{{ item.statement }}</view>
						<view class="img-box" v-if="item.fileList.length > 0">
							<block v-for="(img, imgIndex) of item.fileList" :key="imgIndex">
								<image :src="linkImg(img.path)" mode="aspectFill" @click="previewImage(item.fileList, imgIndex)"></image>
							</block>
						</view>
						<view class="info-btm">
							<view class="btm-time">{{ item.difference | parseTime('{y}-{m}-{d}') }}</view>
							<view class="btm-action">
								<view v-if="likeOpen" @click="like(item)">
									<u-icon v-if="item.isLike == 1" class="icon" name="heart-fill" color="#D0021B"></u-icon>
									<u-icon v-else class="icon" name="heart" color="#999"></u-icon>
									<text class="line">点赞</text>
								</view>
								<view v-if="commentOpen" @click="showContent(item)">
									<u-icon class="icon" name="chat" color="#999"></u-icon>
									<text class="line">评论</text>
									<view class="info-comment" v-if="item.show == '1'">
										<view class="inr">
											<u-input inputAlign="left" v-model="content" type="text" :focus="true" :placeholder="placeholder" style="width: 100%;" />
											<u-button class="form-btn" type="error" size="medium" @click="confirm(item)">发送</u-button>
										</view>
									</view>
								</view>
							</view>
						</view>
						<view class="info-content">
							<view class="link" v-if="item.memberStatementLike && likeOpen">
								<u-icon class="icon" name="heart-fill" color="#5D86B6"></u-icon>
								{{ item.memberStatementLike }}
							</view>
							<block v-if="commentOpen">
								<view class="con" v-for="(con, conIndex) of item.memberStatementContentList" :key="conIndex">
									<view class="sub-con" @click="showContent(item, con)">
										<block v-if="con.pid">
											<text class="ttl">{{ con.userId }}</text>
											回复
											<text class="ttl">{{ con.pname }}</text>
											:
										</block>
										<text v-else class="ttl">{{ con.userId }}:</text>
										<text class="txt">{{ con.content }}</text>
									</view>
								</view>
							</block>
						</view>
					</view>
				</view>
				<view class="load-more"><u-loadmore :status="loading" /></view>
			</view>
		</block>
		<block v-else>
			<view class="list-box" :style="{ background: loading == 'nodata' ? 'none' : '' }">
				<view class="list-info_02" v-for="(item, index) of momentsList" :key="item.id">
					<view class="right"><image :src="linksImg(item.fileList)" mode="aspectFill"></image></view>
					<view class="left">
						<view class="info-title">{{ item.statement }}</view>
						<view class="info-btm">
							{{ item.createTime | parseTime('{y}-{m}-{d}') }}
							<text class="line"></text>
							<text class="del" @click="remove(item)">删除</text>
							<view class="status" :style="'color: ' + colorMap[item.status]">{{ statusMap[item.status] }}</view>
						</view>
					</view>
				</view>
				<view class="load-more"><u-loadmore :status="loading" /></view>
			</view>

			<view class="uploader-add" @click="addTo()"><u-icon name="plus" color="#fff" size="40"></u-icon></view>
		</block>

		<view v-if="false && memberStatement"></view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
import uniFileUpload from '@/components/uni-file-uploader.vue';
export default {
	data() {
		return {
			scrollTop: 0,
			tabsCurrent: 0,
			tabsList: [
				{
					name: '全部',
					value: 1
				},
				{
					name: '我的',
					value: 0
				}
			],
			colorMap: {
				1: '#19be6b',
				2: '#0099ff',
				3: '#ff9900',
				4: '#ff0000'
			},
			statusMap: {
				1: '通过',
				3: '待审核',
				4: '拒绝'
			},
			nodeStatus: 0,
			title: '',
			content: '',
			pid: '',
			placeholder: '请输入内容',
			contentShow: false,
			momentsList: [],

			readType: '1',
			memberStatement: {
				statement: '',
				authority: ''
			},
			loading: 'loadmore',
			likeOpen: false,
			commentOpen: false
		};
	},
	onLoad() {
		this.loadLogin();
		this.loadData();
		this.loadDict('wys_like', 'likeOpen');
		this.loadDict('wys_comment', 'commentOpen');
	},
	onPullDownRefresh() {
		this.loadData('refresh');
	},
	onReachBottom() {
		if (this.loading == 'loadmore') this.loadData('add');
	},
	onPageScroll(res) {
		this.scrollTop = res.scrollTop;
	},
	computed: {
		...mapState(['userInfo', 'fileList'])
	},
	methods: {
		loadLogin() {
			if (this.userInfo.sysUser) {
				this.clientCode = this.userInfo.sysUser.clientCode;
				this.userId = this.userInfo.sysUser.id;
				this.memberStatement.clientCode = this.userInfo.sysUser.clientCode;
				this.memberStatement.createBy = this.userInfo.sysUser.id;
				this.roleCodes = this.userInfo.roleCodes.join(',');

				this.pageNum = 1;
				this.pageSize = 10;
			} else {
				this.$logout();
			}
		},
		loadData(type = 'add') {
			if (this.loading == 'loading') {
				return false;
			}
			if (type == 'add') {
				if (this.loading == 'nomore') {
					return false;
				}
				this.loading = 'loading';
			} else {
				this.loading = 'loading';
			}
			if (type != 'add') {
				this.pageNum = 1;
			}
			let data = {
				pageNum: this.pageNum,
				pageSize: this.pageSize,
				currentUserId: this.userId,
				roleCodes: this.roleCodes,
				clientCode: this.clientCode,
				memberStatement: this.memberStatement
			};

			let url = '/tanghe-weiyuanshuo/member-statement/applist';
			if (this.tabsCurrent != 0) {
				url = '/tanghe-weiyuanshuo/member-statement/myselflist';
			}

			this.$request(url, data, {
				load: true
			}).then(res => {
				let count = 0;
				if (type != 'add') {
					uni.stopPullDownRefresh();
					this.momentsList = [];
				}
				this.loading = this.pageNum < Math.ceil(res.data.total / this.pageSize) ? 'loadmore' : 'nomore';
				this.pageNum = this.pageNum + 1;
				this.momentsList = this.momentsList.concat(res.data.records);
				this.loaded = true;
				if (this.momentsList.length <= 0) {
					this.loading = 'nodata';
				}
			});
		},
		tabsChange(index) {
			this.tabsCurrent = index;
			this.type(this.tabsList[index].value);
		},
		search(e) {
			this.memberStatement.title = e;
			this.loadData('refresh');
		},
		type(e) {
			this.momentsList = [];
			this.loadData('refresh');
		},
		navTo(url) {
			// uni.navigateTo({
			// 	url: url + '?username=' + this.your + '&style=' + this.self
			// });
		},
		addTo() {
			uni.navigateTo({
				url: '/pages/moments/add'
			});
			// uni.chooseImage({
			// 	count: 1,
			// 	sizeType: ['compressed'],
			// 	sourceType: ['camera'],
			// 	success: res => {
			// 		this.imgList = res.tempFiles;
			// 		res.tempFiles.forEach(item => {
			// 			// this.uploadAPI(item);
			// 			this.checkImg(item);
			// 		});
			// 	}
			// });
		},
		checkImg(item) {
			uni.showLoading({
				title: '加载中...'
			});
			uni.uploadFile({
				url: this.$baseUrl + '/msg_sec_check/image',
				filePath: item.path,
				name: item.name ? item.name : item.path,
				header: {
					Authorization: this.userInfo.Authorization
				},
				success: res => {
					uni.hideLoading();
					let data = JSON.parse(res.data);
					if (data && data.data) {
						this.uploadAPI(item);
					} else {
						this.$msg('包含违规图片！');
					}
				},
				fail: res => {
					uni.hideLoading();
					this.$msg('上传失败！');
				}
			});
		},
		uploadAPI(item) {
			uni.showLoading({
				title: '加载中...'
			});
			uni.uploadFile({
				url: this.$baseUrl + '/file/upload',
				filePath: item.path,
				name: item.name ? item.name : item.path,
				header: {
					Authorization: this.userInfo.Authorization
				},
				success: res => {
					uni.hideLoading();
					let data = JSON.parse(res.data);

					if (data && data.data[0]) {
						let file = {
							name: data.data[0].fileNameW ? data.data[0].fileNameW : data.data[0].name,
							path: data.data[0].path,
							size: data.data[0].size
						};
						this.fileInfo = this.fileList;
						file && this.fileInfo.push(file);
						this.$store.commit('filePush', this.fileInfo);
						uni.navigateTo({
							url: '/pages/moments/add?img=' + JSON.stringify(item)
						});
					} else {
						this.$msg('上传失败！');
					}
				},
				fail: res => {
					uni.hideLoading();
					this.$msg('上传失败！');
				}
			});
		},
		showContent(item, con) {
			this.pid = '';
			this.placeholder = '请输入内容';
			if (item.show != '1') {
				item.show = '1';
			} else {
				item.show = '0';
			}
			if (con) {
				this.pid = con.id;
				this.placeholder = '回复' + con.userId;
			}
		},
		loadDict(type, label) {
			this.$request('/system/sys-dict/dictList', {
				clientCode: this.clientCode,
				sysDict: {
					dictType: type
				}
			}).then(res => {
				this[label] = res.data[0].dictValue == '1' ? true : false;
			});
		},
		remove(item) {
			let data = {
				id: item.id
			};
			this.$request('/tanghe-weiyuanshuo/member-statement/remove', data, {
				load: true
			}).then(res => {
				this.$msg(res.msg);
				setTimeout(() => {
					this.loadData('refresh');
				}, 500);
			});
		},
		like(item) {
			if (this.likeOpen == 0) {
				this.$msg('点赞已禁用！');
				return false;
			}
			let data = {
				memberStatementLike: {
					statementId: item.id,
					userId: this.userId
				}
			};
			this.$request('/tanghe-weiyuanshuo/member-statement-like/add', data, {
				load: true
			}).then(res => {
				this.$msg(res.msg);
				item.isLike == 1 ? (item.isLike = '0') : (item.isLike = '1');
				item.memberStatementLike = res.data;
			});
		},
		confirm(item) {
			if (this.commentOpen == 0) {
				this.$msg('评论已禁用！');
				return false;
			}

			let data = {
				content: this.content
			};
			this.$request('/msg_sec_check/content', data, {
				load: true
			}).then(res => {
				if (res.data) {
					this.sendContent(item);
				} else {
					this.$msg('包含敏感词汇！');
				}
			});
		},
		sendContent(item) {
			let data = {
				memberStatementContent: {
					statementId: item.id,
					userId: this.userId,
					content: this.content,
					pid: this.pid
				}
			};
			this.$request('/tanghe-weiyuanshuo/member-statement-content/add', data, {
				load: true
			}).then(res => {
				this.$msg(res.msg);
				item.memberStatementContentList = res.data;
				item.show = '0';
				this.content = '';
			});
		},
		linksImg(item) {
			if (item && item.length > 0) {
				return this.$baseUrl + '/file/download/preview/0?path=' + item[0].path.replace('\\', '-');
			}
		},
		linkImg(path) {
			if (path) {
				return this.$baseUrl + '/file/download/preview/0?path=' + path.replace('\\', '-');
			}
		},
		previewImage(list, index) {
			let urls = [];
			list.forEach(item => {
				urls.push(this.linkImg(item.path));
			});
			uni.previewImage({
				current: index,
				urls: urls
			});
		}
	}
};
</script>

<style lang="scss">
.min-w {
	top: 2rpx;
	margin-left: 40rpx;
}

.list-box {
	padding: 0 30rpx;
	background-color: #fff;
}

.list-info_02 {
	.info-time {
		.del {
			margin: 0;
			padding: 0;
			color: #5d86b6;
			background: none;
		}
	}

	.right {
		margin: 0 20rpx 0 0;
		overflow: hidden;

		image {
			width: 236rpx;
			height: 148rpx;
		}
	}
}

.min-w {
	position: relative;
}
</style>
